<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" >

<head>
    <th:block th:include="common/common_head :: commonHeader('新增宣告表')"/>
    <link rel="stylesheet" th:href="@{/static/js/plugins/jquery-layout/jquery.layout-latest.css}">
</head>
<body class="gray-bg">
<div class="container-div ui-layout-center">
    <div class="row">
        <div class="form-group">
            <div class="col-sm-8" style="margin-left: 16px">
                <input class="btn btn-primary" type="button" onclick="saveDetail()" value="提交">
                <button class="btn btn-primary" type="button" onclick="Dialog.closeFrame(window.name)">取 消</button>
            </div>
        </div>
        <div class="col-sm-12" style="margin-top: 10px">
            <form id="declarationFrom" class="ibox-content form-horizontal" method="post" enctype="multipart/form-data">
                <!--新增页表头信息-->
                <table border="1" style=" margin: auto; width: 100%;text-align: center;font-size: 1.1em; ">
                    <tr th:rowspan="2" style="line-height: 2.5em;">
                        <td colspan="7"><b>产品/部件宣告表</b></td>
                        <td colspan="2">编号：<b>RoHS-01</b><br>生效期：<span
                                th:text="${#dates.format(#dates.createNow(),'yyyy-MM-dd')}"></span></td>
                    </tr>
                    <tr>
                        <td th:rowspan="4"><b>基本信息</b></td>
                        <td><span class="required-sign">*</span>专用号</td>
                        <td><input id="materialCode" class="form-control" name="materialCode" type="text" autocomplete="off" required>
                        </td>
                        <td>产品/部件名称</td>
                        <td><input id="materialDesc" class="form-control" name="materialDesc" readonly required></td>
                        <td>供应商</td>
                        <td><input class="form-control" name="vendorName" type="text" th:value="${vendorName}" readonly>
                        </td>
                        <td>供应商编码</td>
                        <td><input id="vendorCode" class="form-control" name="vendorCode" type="text" th:value="${vendorCode}" readonly>
                        </td>
                    </tr>
                    <tr>
                        <td><span class="required-sign">*</span>QC080000体系</td>
                        <td><select id="qc080000" class="form-control" name="qc080000" required>
                            <option></option>
                            <option value="0">通过</option>
                            <option value="1">不通过</option>
                        </select></td>
                        <td>RoHS承诺书编号</td>
                        <td><input id="guaranteeCode" class="form-control" name="guaranteeCode" readonly></td>
                        <td>宣告日期</td>
                        <td><input id="declarationDate" class="form-control" name="declarationDate"
                                   th:value="${#dates.format(#dates.createNow(),'yyyy-MM-dd')}" readonly></td>
                        <td><span class="required-sign">*</span>宣告表编号</td>
                        <td><input id="formCode" class="form-control" name="formCode" required autocomplete="off"></td>
                    </tr>
                    <tr>
                        <td><span class="required-sign">*</span>联系人</td>
                        <td><input id="contacter" class="form-control" name="contacter" required autocomplete="off">
                        </td>
                        <td><span class="required-sign">*</span> 联系电话</td>
                        <td><input id="telephone" class="form-control" name="telephone" required autocomplete="off">
                        </td>
                        <td><span class="required-sign">*</span>地址</td>
                        <td><input id="address" class="form-control" name="address" required autocomplete="off"></td>
                        <td><span class="required-sign">*</span>申请审核工厂</td>
                        <td><input id="verifyFactory" class="form-control" name="verifyFactory" required
                                   autocomplete="off"></td>
                    </tr>
                    <tr>
                        <td colspan="2"><span class="required-sign">*</span>材料组成相同的关联专用号<br><span class="required-sign"
                                                                                                  style="font-size: 8px">多个专用号以英文逗号隔开</span>
                        </td>
                        <td colspan="2"><input id="relateMaterialCode" class="form-control" name="relateMaterialCode"
                                               required autocomplete="off"></td>
                        <td colspan="2"><span class="required-sign">*</span>关联供货工厂<br><span class="required-sign"
                                                                                            style="font-size: 8px">多个工厂以英文逗号隔开</span>
                        </td>
                        <td colspan="2"><input id="relateSupplier" class="form-control" name="relateSupplier" required
                                               autocomplete="off"></td>
                    </tr>
                </table>
            </form>
            
            <!--新增页item列表-->
            <div class="col-sm-12 select-info order-table">
                <div class="btn-group hidden-xs toolbar" id="declarationItemToolBar" role="group">
                    <a class="btn btn-outline btn-success btn-rounded" onclick="showAddModal()">
                        <i class="fa fa-plus"></i> 新增
                    </a>
                    <a class="btn btn-outline btn-danger btn-rounded" onclick="deleteItem()">
                        <i class="fa fa-trash-o"></i> 删除
                    </a>
                </div>
                <table id="declarationItem" data-mobile-responsive="true" data-id-field="randId"></table>
                <div>
                    <textarea class="form-control" rows="15" style="resize:none;margin-top: 20px;" readonly></textarea>
                    <div style="text-align: center;font-size: 1.3em;margin-top: 10px;margin-bottom: 20px;">
                        <span class="required-sign">*</span><b>以上承诺：</b>
                        <input type="radio" name="commit" value="0">同意
                        <input type="radio" name="commit" value="1">不同意
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 模态框（Modal） -->
<div id="addItemModel" style="display: none">
    <div class="container-div">
        <form id="itemModalFrom" class="ibox-content form-horizontal">
            <div style="font-size: x-large;">子部件/原料</div><br>
            <div class="form-group row">
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>名称：</label>
                <div class="col-sm-3">
                    <input class="form-control" required id="compName" name="compName">
                </div>
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>规格型号：</label>
                <div class="col-sm-3">
                    <input class="form-control" required id="compType" name="compType">
                </div>
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>供应商：</label>
                <div class="col-sm-3">
                    <input class="form-control" required id="compSupplier" name="compSupplier">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>数量：</label>
                <div class="col-sm-3">
                    <input class="form-control" type="number" required id="compQuantity" name="compQuantity">
                </div>
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>重量(g)：</label>
                <div class="col-sm-3">
                    <input class="form-control" type="number" required id="compWeight" name="compWeight">
                </div>
            </div>
            <hr>
            <div style="font-size: x-large;">均质材料</div><br>
            <div class="form-group row">
                <!--<label for="homegenousNo">序号</label>
                <input type="text" name="homegenousNo" id="homegenousNo">-->
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>名称：</label>
                <div class="col-sm-3">
                    <input class="form-control" required id="homegeName" name="homegeName">
                </div>
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>规格型号：</label>
                <div class="col-sm-3">
                    <input class="form-control" required id="homegeType" name="homegeType">
                </div>
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>重量(g)：</label>
                <div class="col-sm-3">
                    <input class="form-control" type="number" required id="homegeWeight" name="homegeWeight">
                </div>
            </div>
            <hr>
            <div style="font-size: x-large;">第三方测试</div><br>
            <div class="form-group row">
                <!--<label for="homegenousNo">序号</label>
                <input type="text" name="homegenousNo" id="homegenousNo">-->
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>委托单位全称：</label>
                <div class="col-sm-3">
                    <input class="form-control" required id="thirdCompany" name="thirdCompany">
                </div>
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>检测机构：</label>
                <div class="col-sm-3">
                    <input class="form-control" required id="thirdInstitution" name="thirdInstitution">
                </div>
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>测试报告编号：</label>
                <div class="col-sm-3">
                    <input class="form-control" required id="thirdReport" name="thirdReport">
                </div>
            </div>
            <hr>
            <div style="font-size: x-large;">限制使用物质名称</div><br>
            <div class="form-group row">
                <label class="col-sm-1 control-label">Pb：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="pb" name="pb">
                </div>
                <label class="col-sm-1 control-label">Cd：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="cd" name="cd">
                </div>
                <label class="col-sm-1 control-label">Hg：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="hg" name="hg">
                </div>
                <label class="col-sm-1 control-label">Cr（VI）：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="cr" name="cr">
                </div>
                <label class="col-sm-1 control-label">PBB：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="pbb" name="pbb">
                </div>
                <label class="col-sm-1 control-label">PBDE：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="pbde" name="pbde">
                </div>
                <label class="col-sm-1 control-label">DEHP：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="dehp" name="dehp">
                </div>
                <label class="col-sm-1 control-label">DBP：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="dbp" name="dbp">
                </div>
                <label class="col-sm-1 control-label">BBP：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="bbp" name="bbp">
                </div>
                <label class="col-sm-1 control-label">DIBP：</label>
                <div class="col-sm-2">
                    <input class="form-control" id="dibp" name="dibp">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-sm-1 control-label"><span class="required-sign">*</span>是否豁免项</label>
                <div class="col-sm-2">
                    <input class="form-control" name="exemption" required>
                </div>
            </div>
        </form>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addItem()">确定</button>
        <button type="button" class="btn btn-default" data-dismiss="modal" onclick="closeModal()">关闭</button>
    </div>
</div>
<!-- 模态框结束 -->

<!--引入公共js-->
<div th:include="common/onload_js :: onloadJS"></div>
<script type="text/javascript" th:src="@{/static/js/plugins/jquery-layout/jquery.layout-latest.js}"></script>

<script type="text/javascript">

    $(function () {
        //输入物料描述，后台获取物料数据
        $("#materialCode").change(function () {
            Page.ajaxGET(ctxPath + "/material/getMaterialByCode",{"materialCode":$("#materialCode").val().trim()},function(data){
                if(data.result==null){
                    Dialog.errorMsg("该专用号不存在！");
                    $("#materialDesc").val('');
                    $("#guaranteeCode").val('');
                    return false;
                }
                $("#materialDesc").val(data.result.materialDesc);
                $("#guaranteeCode").val("UR-"+$("#materialCode").val().trim()+"-01");
            });
        });
    });

    let searcherBS = Searcher.createBS('#declarationItem',
        [
            [
                {
                    checkbox: true,
                    rowspan: 2,
                    align: 'center',
                    valign: 'middle'
                },
                {
                    field: '',
                    title: "<p>序号</p><p>NO</p>",
                    valign: "middle",
                    align: "center",
                    colspan: 1,
                    rowspan: 2,
                    formatter: function (value, row, index) {
                        return index + 1;
                    }
                },
                {
                    title: "<p>子部件/原料</p><p>Component/Material</p>",
                    valign: "middle",
                    align: "center",
                    colspan: 5,
                    rowspan: 1
                },
                {
                    title: "<p>均质材料</p><p>Homegenous Material</p>",
                    valign: "middle",
                    align: "center",
                    colspan: 3,
                    rowspan: 1
                },
                {
                    title: "<p>第三方测试</p><p>Third party testing</p>",
                    valign: "middle",
                    align: "center",
                    colspan: 6,
                    rowspan: 1
                },
                {
                    title: "<p>限制使用物质名称</p><p>Name of Ristricted Substance /CAS</p>",
                    valign: "middle",
                    align: "center",
                    colspan: 10,
                    rowspan: 1
                },
                {
                    title: "<p>是否豁免项</p><p>Exemption</p>",
                    valign: "middle",
                    align: "center",
                    field: "exemption",
                    colspan: 1,
                    rowspan: 2
                }
            ],
            [
                {
                    field: 'compName',
                    title: '<p>名称</p><p>Name</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'compType',
                    title: '<p>规格型号</p><p>Specification/Type</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'compSupplier',
                    title: '<p>供应商</p><p>Supplier</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'compQuantity',
                    title: '<p>数量</p><p>Quantity</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'compWeight',
                    title: '<p>重量(g)</p><p>Weight</p>',
                    valign: "middle",
                    align: "center"
                },
                /*{
                    field: 'homegenousNo',
                    title: '<p>序号</p><p>No.</p>',
                    valign: "middle",
                    align: "center"
                },*/
                {
                    field: 'homegeName',
                    title: '<p>名称</p><p>Name</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'homegeType',
                    title: '<p>规格型号</p><p>Specification/Type</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'homegeWeight',
                    title: '<p>重量(g)</p><p>Weight</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'thirdCompany',
                    title: "<p>委托单位全称</p><p>Full name of the entrusted company</p>",
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'thirdInstitution',
                    title: "<p>检测机构</p><p>Testing institutions</p>",
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'thirdReport',
                    title: "<p>测试报告编号</p><p>Testing Report Number</p>",
                    valign: "middle",
                    align: "center"
                },
                {
                    title: "<p>报告附件</p><p>Report in attachment</p>",
                    valign: "middle",
                    field: 'thirdAttachment',
                    align: "center",
                    formatter: function (value, row, index) {
                        return "<a href='javascript:void(0)' class='reportId' href='javascript:void(0)' onclick=\"dowloadFileById('" + row.reportId + "');\"  style='color:#0793c5;border-bottom:1px solid'  >" + value + "</a>  ";
                    },
                    events: window.operatEvents = {
                        'click .fileUuid': function (e, value, row, index) {
                            console.log('12', row)
                        },
                    },

                },
                {
                    title: "<p>报告日期</p><p>Report Date</p>",
                    valign: "middle",
                    field: 'thirdReportdate',
                    align: "center"
                },
                {
                    title: "<p>有效期至</p><p>Expiry Date</p>",
                    valign: "middle",
                    align: "center",
                    field: 'thirdExpiredate'
                },
                {
                    field: 'pb',
                    title: '<p>Pb</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'cd',
                    title: '<p>Cd</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'hg',
                    title: '<p>Hg</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'cr',
                    title: '<p>Cr</br>（VI）</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'pbb',
                    title: '<p>PBB</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'pbde',
                    title: '<p>PBDE</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'dehp',
                    title: '<p>DEHP</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'dbp',
                    title: '<p>DBP</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'bbp',
                    title: '<p>BBP</p>',
                    valign: "middle",
                    align: "center"
                },
                {
                    field: 'dibp',
                    title: '<p>DIBP</p>',
                    valign: "middle",
                    align: "center"
                }
            ]
        ], {"showColumns": false, "showRefresh": false, "firstLoad": false, "showExport": false}
    )

    //保存提交的数据
    function saveDetail() {
        if ($("#declarationFrom").valid()) {
            let tableItems=$("#declarationItem").bootstrapTable("getData");
            if(tableItems.length==0){
                Dialog.errorMsg("请新增明细！");
                return false;
            }
            //请先仔细阅读并同意承诺信息，否则将无法提交
            let radio=$("input[type='radio']:checked");
            if(radio.length==0||radio.val()!=0){
                Dialog.errorMsg("请仔细阅读并同意承诺信息，否则将无法提交!");
                return false;
            }

            let formData=transformToJson($("#declarationFrom").serializeArray());
            //将item数据放入，一起发送到后台
            formData["itemList"]=tableItems;
            layer.load(1, {shade: [0.3, '#393D49']});
            $.ajax({
                url: ctxPath + "/declarationForm/declarationAdd",
                type: 'POST',
                data: JSON.stringify(formData), // 上传formdata封装的数据包
                dataType: 'JSON',
                cache: false, // 不缓存
                processData: false, // jQuery不要去处理发送的数据
                contentType: false, // jQuery不要去设置Content-Type请求头
                success: function (data) {
                    if (data.code == 0) {
                        Dialog.msg("操作成功!");
                        parent.refresh();
                        Dialog.closeFrame(window.name);
                    } else {
                        layer.closeAll();
                        Dialog.errorMsg("操作失败，请重试!");
                    }
                }
            });
        }
    }

    /**
     * 删除
     */
    function deleteItem() {
        var randIds = searcherBS.getSelectedRows("randId");
        if (randIds.length < 1) {
            Dialog.errorMsg("至少选择一行删除！");
            return;
        }
        Dialog.confirm('确定删除？', function(){
            $('#declarationItem').bootstrapTable('remove',{
                field: 'randId',
                values: randIds
            })
        });
    }

    /**
     * 显示新增modal
     */
    function showAddModal() {
        modalIndex=Dialog.open("详情", $("#addItemModel"), {area: ['80%', '90%']});
    }

    /**
     * 新增
     */
    function addItem() {
        if ($("#itemModalFrom").valid()) {
            let formData=transformToJson($("#itemModalFrom").serializeArray());
            //后台获取报告库报数据
            $.ajax({
                url: ctxPath + "/reportRepository/reportDataByCode",
                data: {
                  "vendorCode":$("#vendorCode").val(),
                    "reportCode":$("#thirdReport").val()
                },
                dataType:"json",
                error: function (data) {
                    Dialog.errorMsg("新增失败！");
                },
                success: function (data) {
                    if(data.result==null){
                        Dialog.errorMsg("该测试报告编号不存在或已过期，请确认！");
                        return false;
                    }
                    let entity=data.result;
                    formData.thirdAttachment=entity.attach;
                    //报告库id，下载报告使用
                    formData.reportId=entity.pkId;
                    formData.thirdReportdate=entity.reportDate;
                    formData.thirdExpiredate=entity.expireDate;
                    //将数据绑定到item表格
                    $("#declarationItem").bootstrapTable('append',formData);
                    //将form清空
                    document.getElementById("itemModalFrom").reset();
                    closeModal();
                }
            });
        }
    }

    /**
     * 关闭模态框
     */
    function closeModal() {
        layer.close(modalIndex);
    }

    /**
     * 将form转换成对象
     * @param formData
     */
    function transformToJson(formData){
        var obj={}
        for (var i in formData) {
            //下标为的i的name做为json对象的key，下标为的i的value做为json对象的value
            obj[formData[i].name]=formData[i]['value'];
        }
        //随机生成ID
        obj["randId"]=''+new Date().getHours() +new Date().getMinutes()+new Date().getSeconds()+new Date().getMilliseconds();
        return obj;
    }


    /**
     **根据id下载报告文件
     **
     **/
    function dowloadFileById(reportId) {
        window.location.href = ctxPath + "/reportRepository/downloadFileById?id=" + reportId;
    }

</script>

</body>
</html>